<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head_css :: head(~{::title}, ~{::link}, ~{::style})">
    <meta charset="utf-8">
    <title>通讯录</title>
    <link th:href="@{/weixin/css/mui.indexedlist.css}" rel="stylesheet"/>
    <style>
        html, body {
            height: 100%;
        }

        .mui-input-row .input-icon {
            width: 50%;
            float: left;
        }

        .mui-input-row a {
            margin-right: 10px;
            float: right;
            text-align: left;
            line-height: 1.5;
        }

        .div_opinion {
            text-align: left;
        }

        .opinionContent {
            margin: 10px;
            width: 65%;
            float: right;
            font-weight: normal;
        }

        .opinionContent div {
            text-align: right;
        }

        .opinionContent div span {
            padding: 10px;
        }

        .opinionContent .content_h5 {
            color: #000;
            font-size: 17px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">通讯录</h1>
</header>
<div class="mui-content">
    <div id='list' class="mui-indexed-list">
        <div class="mui-indexed-list-search mui-input-row mui-search">
            <input type="search"
                   class="mui-input-clear mui-indexed-list-search-input"
                   placeholder="搜索"/>
        </div>
        <div class="mui-indexed-list-bar">
            <a>A</a>
            <a>B</a>
            <a>C</a>
            <a>D</a>
            <a>E</a>
            <a>F</a>
            <a>G</a>
            <a>H</a>
            <a>I</a>
            <a>J</a>
            <a>K</a>
            <a>L</a>
            <a>M</a>
            <a>N</a>
            <a>O</a>
            <a>P</a>
            <a>Q</a>
            <a>R</a>
            <a>S</a>
            <a>T</a>
            <a>U</a>
            <a>V</a>
            <a>W</a>
            <a>X</a>
            <a>Y</a>
            <a>Z</a>
        </div>
        <div class="mui-indexed-list-alert"></div>
        <div class="mui-indexed-list-inner">
            <div class="mui-indexed-list-empty-alert">
                没有数据
            </div>
            <ul class="mui-table-view">
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/weixin/js/mui.indexedlist.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/mui.address.wx.js}"></script>
<script charset="utf-8" th:inline="javascript">
    var isUniWebview = [[${nav.isUniWebview}]];

    if (!mui.os.plus || isUniWebview) {
        // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
        $('.mui-bar').remove();
    }

    mui.init({
        keyEventBind: {
            backbutton: !isUniWebview //关闭back按键监听
        }
    });

    mui.ready(function () {
        var list = document.getElementById('list');
        list.style.height = document.body.offsetHeight + 'px';
        var op = {"skey": "[(${nav.skey})]", "type": "", "isUniWebview": isUniWebview};
        window.addr = new mui.Address(list, op);
        window.addr.addrInit();
    })

    $(function () {
        watermark([[${realName}]]);
    });
</script>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
</body>
</html>